<template>
  <div class="me">
    <div class="top">
      <div>饿了么</div>
    </div>
    <div class="xinxi">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F1efc22d5-268c-4488-89f9-588846db64ea%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1678498484&t=fcf92ae5b3bb33a1a3b32c4c746f0e49" alt="">
      <div>
        <div>慎</div>
        <div>{{userinfo.phone}}</div>
      </div>
    </div>
    <div class="money">
      <div class="left">
        <img src="https://img.alicdn.com/imgextra/i3/O1CN010LxbFE1iuDvnAX5E7_!!6000000004472-2-tps-66-66.png_Q90s50.jpg" alt="">
        <div>我的资产</div>
      </div>
      <div v-for="(item,index) in arr" :key="index" class="right">
          <span> <img :src="item.imgs" alt=""></span>
        <div>
          <div>{{item.name}}</div>
          <div>{{item.text}}</div>
        </div>
      </div>
    </div>
    <div class="xiangqing">
      <van-grid :border=false>
  <van-grid-item icon="location-o" text="我的地址" to="/shouhuo" />
  <van-grid-item icon="service-o" text="我的客服" />
  <van-grid-item icon="description" text="关于饿了么" />
  <van-grid-item icon="passed" text="用户隐私" />
  <van-grid-item icon="warning-o" text="规则中心" />
  </van-grid>
    </div>
  </div>
</template>

<script>
// 获取localStroage的数据
var userinfo = JSON.parse(localStorage.getItem('userinfo'))
export default {
   data() {
    return {
      arr:[
        {imgs:"https://nr-op.elemecdn.com/image/mussel-164277423089735.png?x-oss-process=image/format,png/quality,q_90",
          name:"红包",
          text:"查看我的红包"
        },
        {imgs:"https://nr-op.elemecdn.com/image/mussel-1642774562217617.png?x-oss-process=image/format,png/quality,q_90",
          name:"卷包",
          text:"查看我的卷"
        },
      ],
      userinfo:userinfo
    }
   },
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.me{
  width: 100%;
  height: 812px;
  background-color: #f5f5f5
}
.top{
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: 700;
}
.top>div{
  height: 44px;
  line-height: 44px;
  margin-left: 10px;
}
.xinxi{
  display: flex;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
}
.xinxi img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 15px;
   margin-left: 10px;
}
.xinxi div{
  height: 20px;
  /* width: 60px; */
}
.xinxi>div>div{
  /* text-align: center; */
  margin-top: 20px;
  line-height: 20px;
  margin-left: 10px;
}
.xinxi>div :nth-child(1){
  font-size: 18px;
  font-weight: 700;
}
.xinxi>div :nth-child(2){
  margin-top: 10px;
}
.money{
  height: 80px;
  display: flex;
  background-color: white;
  justify-content: space-around;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
}
.money .left img{
  width: 22px;
  height: 22px;
  margin: 20px 32px;
}
.money .left div{
  width: 48px;
  height: 15px;
  font-size: 12px;
  margin: -15px auto;
}
.money .right>span{
  display: block;
   width: 22px;
  height: 22px;
}
.money .right img{
  width: 22px;
  height: 22px;
  margin: 10px 32px;
}
.money .right>div{
  width: 87.5px;
  height: 30px;
}
.money .right>div :nth-child(1){
  font-size: 13px;
  font-weight: bold;
  width: 26px;
  height: 15px;
   margin: 15px auto;
}
.money .right>div :nth-child(2){
  font-size: 12px;
  width: 72px;
  height: 13px;
  margin: -10px auto;
  text-align: center;
}
.xiangqing{
  height: 130px;
  margin: 10px 10px;
  background-color: white;
}
.van-grid{
  height: 100%;
}
.van-grid-item {
  height: 53px;
  margin-top: 10px;
}
</style>